/**
 * 学习目标：JSX-插值表达式的基本使用
 * 表达式
 * 1. 变量?
 * 2. 基本数据类型:
 *  2.1 number string 正常显示
 *  2.2 boolean null undefined 不会显示
 * 3. 引用数据类型:  object  array /function
 *  3.1 object不能放在{}中, 会直接报错
 *  3.2 array可以放在{}中, 数组内的每项元素当做一个个dom节点直接渲染出来
 *  3.3 function本身不能放在{}中, 往往函数的调用可以放在{}中
 * 4. 其它类型: 三元表达式 逻辑且 JSX本身
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = true;

const divNode = (
  <div>
    {/*  三元表达式 */}
    <h1>{isLoading ? '加载中' : '正常显示'}</h1>
    {/* 逻辑且 */}
    <h2>{isLoading && '加载中'}</h2>
    {/* JSX本身 */}
    <h3>{<span>123</span>}</h3>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
